<template>
	<el-card class="!border-none" shadow="never">
      <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">

        <el-form-item label="渠道手机号">
          <el-input
              class="w-[280px]"
              v-model="queryParams.link_phone"
              clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="resetPage">查询</el-button>
          <el-button @click="resetParams">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
	<el-tabs v-model="queryParams.check_status" @tab-change="handleChange">
		<template v-for="(item,i) in tabList" :key="'tabList'+i">
			<el-tab-pane :label="item.name" :name="item.name">
				<div v-if="queryParams.check_status=='待处理'" class="article-lists">
					<el-card class="!border-none" shadow="never">
						<el-table size="large" v-loading="pager.loading" :data="pager.lists">
							<el-table-column label="序号" type="index" :index="indexAdd" min-width="90" />
							<!-- <el-table-column label="申请单号" prop="sn" min-width="180" /> -->
							<el-table-column label="姓名" prop="identity_name" min-width="160" />
							<el-table-column label="头像" prop="avatar" min-width="90">
								<template #default="{ row }">
									<image-contain
										v-if="row.avatar"
										:src="row.avatar"
										:width="60"
										:height="45"
										:preview-src-list="[row.avatar]"
										preview-teleported
										fit="contain"
									/>
								</template>
							</el-table-column>
							<el-table-column label="微信号" prop="wechat_no" min-width="190" />
							<el-table-column label="身份证号" prop="identity_no" min-width="190" />
							<el-table-column label="个人简介" prop="self_introduction" min-width="200" >
								<template #default="{ row }">
									<div class="ml-4 overflow-hidden">
										<el-tooltip effect="dark" :content="row.self_introduction" placement="top">
											<template #content>
												<div class="w-52">{{ row.self_introduction }}</div>
											</template>
											<div class="text-base line-clamp-2">
												{{ row.self_introduction }}
											</div>
										</el-tooltip>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="公司名称" prop="company_name" min-width="180" />
							<el-table-column label="职务" prop="position" min-width="160" />
							<el-table-column label="业务洽谈地址" prop="company_address" min-width="200" >
								<template #default="{ row }">
									<div class="ml-4 overflow-hidden">
										<el-tooltip effect="dark" :content="row.company_address" placement="top">
											<template #content>
												<div class="w-52">{{ row.company_address }}</div>
											</template>
											<div class="text-base line-clamp-2">
												{{ row.company_address }}
											</div>
										</el-tooltip>
									</div>
								</template>
							</el-table-column>
																	<!-- 改两个地方 -->
							<el-table-column label="主营业务" prop="product_cate_str" min-width="180" />
							<el-table-column label="优势业务标签" prop="advantage_str" min-width="180" />
							<el-table-column label="从业时间" min-width="90">
								<template #default="{ row }">{{row.practice_year}}年</template>
							</el-table-column>

							<el-table-column label="提交人姓名" prop="user_real_name" min-width="130" />
							<el-table-column label="提交人手机号" prop="user_phone" min-width="130" />
							<el-table-column label="提交时间" prop="create_time" min-width="180" />
							<el-table-column label="申请来源" prop="from_user" min-width="180" />
							<el-table-column label="操作" width="200" fixed="right">
								<template #default="{ row }">
									<el-button v-perms="['channel.channel/applyReject']" type="danger" link @click="handleCheck(row)">审核驳回</el-button>
									<el-button v-perms="['channel.channel/applyPass']" type="primary" link >
										<!-- <router-link :to="{ path: getRoutePath('channel.channel/applyPass'), query: { id: row.id, name: row.identity_name, no: row.identity_no, phone: row.user_phone, practice_year: row.practice_year, complete_form_status: row.complete_form_status } }" >审核通过</router-link> -->
										<router-link :to="{ path: getRoutePath('channel.channel/applyPass'), query: {
											...row,
											product_cate_ids: JSON.stringify(row.product_cate_ids),
											advantage_tags: JSON.stringify(row.advantage_tags),
											product_cate_proofs: JSON.stringify(row.product_cate_proofs)
										} }" >审核通过</router-link>
									</el-button>
									<!-- <el-button v-perms="['channel.channel/sendCompleteForm']" v-if="row.complete_form_status == 0" type="primary" link @click="handleSend(row.id)">发送表单</el-button> -->
								</template>
							</el-table-column>
						</el-table>
						<div class="flex justify-end mt-4">
							<pagination v-model="pager" @change="getLists" />
						</div>
					</el-card>
				</div>
				<div v-if="queryParams.check_status=='已处理'" class="article-lists">
					<el-card class="!border-none" shadow="never">
						<el-table size="large" v-loading="pager.loading" :data="pager.lists">
							<el-table-column label="序号(ID)" type="index" :index="indexAdd" min-width="90" />
							<!-- <el-table-column label="申请单号" prop="sn" min-width="180" /> -->
							<el-table-column label="所属城市" min-width="120">
								<template #default="{ row }">
									<span v-if="row.area_id" v-city="row.area_id"></span>
								</template>
							</el-table-column>
							<el-table-column label="姓名" prop="identity_name" min-width="160" />
							<el-table-column label="头像" prop="avatar" min-width="90">
								<template #default="{ row }">
									<image-contain
										v-if="row.avatar"
										:src="row.avatar"
										:width="60"
										:height="45"
										:preview-src-list="[row.avatar]"
										preview-teleported
										fit="contain"
									/>
								</template>
							</el-table-column>
							<el-table-column label="微信号" prop="wechat_no" min-width="190" />
							<el-table-column label="身份证号" prop="identity_no" min-width="190" />
							<el-table-column label="个人简介" prop="self_introduction" min-width="200" >
								<template #default="{ row }">
									<div class="ml-4 overflow-hidden">
										<el-tooltip effect="dark" :content="row.self_introduction" placement="top">
											<template #content>
												<div class="w-52">{{ row.self_introduction }}</div>
											</template>
											<div class="text-base line-clamp-2">
												{{ row.self_introduction }}
											</div>
										</el-tooltip>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="公司名称" prop="company_name" min-width="180" />
							<el-table-column label="职务" prop="position" min-width="160" />
							<el-table-column label="业务洽谈地址" prop="company_address" min-width="200" >
								<template #default="{ row }">
									<div class="ml-4 overflow-hidden">
										<el-tooltip effect="dark" :content="row.company_address" placement="top">
											<template #content>
												<div class="w-52">{{ row.company_address }}</div>
											</template>
											<div class="text-base line-clamp-2">
												{{ row.company_address }}
											</div>
										</el-tooltip>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="主营业务" prop="product_cate_str" min-width="180" />
							<el-table-column label="优势业务标签" prop="advantage_str" min-width="180" />
							<el-table-column label="从业时间" min-width="90">
								<template #default="{ row }">{{row.practice_year}}年</template>
							</el-table-column>

							<el-table-column label="提交人姓名" prop="user_real_name" min-width="130" />
							<el-table-column label="提交人手机号" prop="user_phone" min-width="130" />
							<el-table-column label="提交时间" prop="create_time" min-width="180" />
							<el-table-column label="申请来源" prop="from_user" min-width="180" />
							<el-table-column label="审核状态" min-width="100">
								<template #default="{ row }">
									<el-button type="text" v-if="row.status == 0">审核中</el-button>
									<el-button type="text" v-if="row.status == 1">审核通过</el-button>
									<el-button type="text" v-if="row.status == 2">审核驳回</el-button>
								</template>
							</el-table-column>
							<el-table-column label="审核人" prop="a_name" min-width="180">
								<template #default="{ row }">
									<span v-if="row.a_name">{{ row.a_name }}</span>
									<span v-else>{{ row.ca_name }}</span>
								</template>
							</el-table-column>
							<el-table-column label="审核意见" prop="reason" min-width="100" />
							<el-table-column label="审核时间" prop="check_time" min-width="180" />
						</el-table>
						<div class="flex justify-end mt-4">
							<pagination v-model="pager" @change="getLists" />
						</div>
					</el-card>
				</div>
			</el-tab-pane>
		</template>
		<check_demand v-model:show="checkState.show" :value="checkState.value" :area_id="checkState.area_id" @confirm="handleConfirmCheck"></check_demand>
	</el-tabs>
</template>
<script lang="ts" setup name="demandLists">
	import { applyLists,applyReject, sendCompleteForm } from '@/api/channel/apply';
	import { usePaging } from '@/hooks/usePaging';
	import feedback from '@/utils/feedback';
	import {getRoutePath} from '@/router';
	import check_demand from './check_demand.vue'
	import useAppStore from '@/stores/modules/app'

	const useApp = useAppStore()
	const optionCity:any = [{label: '全部',value:''}].concat(useApp.optionCity);
	const tabList = ref([{ name: '待处理', id: ['0'] }, { name: '已处理', id: ['1', '2'] }]);
	let queryParams = reactive({
		check_status: '待处理',
		status: ['0'],
		start_time: '',
		end_time: '',
		link_phone: '',
		area_id: ''
	});
	
	onMounted(async () => {
		getLists();
	})
	
	const checkState = reactive({
		show: false,
		value: '',
		area_id:''
	})
	
	const handleCheck = (value : any) => {
		checkState.show = true
		checkState.area_id = value.area_id;
		checkState.value = value.id;
	}
	const checkStop = ref(true)
	const handleConfirmCheck = async (value : any) => {
		console.log(checkStop.value)
		console.log(value)
		if (checkStop.value) {
			checkStop.value = false;
			console.log('checkStop')
			try{
				await applyReject({ ...value })
				checkState.show = false
				getLists()
				setTimeout(()=>{
					checkStop.value = true;
				},1000)
			}catch(error) {
				console.log(error)
				checkStop.value = true;
			}
		}
		
	}

	const handleSend = async (id: any) => {
		try{
			await feedback.confirm('确认给提交人的助融圈app中发送信息填写的表单？','发送表单')
			await sendCompleteForm({id})
			getLists()
		}catch(error) {
			console.log(error)
		}
		
	}
	
	const handleChange = (val : any) => {
		queryParams.status = val == '全部' ? ['0', '1', '2'] : val == '待处理' ? ['0'] : val == '已处理' ? ['1', '2'] : [];
		getLists();
	}
	
	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: applyLists,
		params: queryParams
	})
	const indexAdd = (index: number) => {
        const page = pager.page // 当前页码
        const pagesize = pager.size // 每页条数
        return index + 1 + (page - 1) * pagesize
    }

</script>